<template>
  <div class="chart-stock-turnover-option-container">
    <div class="stock-turnover-title">
      <div>
        <span class="title">备件库存实时统计</span>
        <span class="tips">数据截至 {{updateTimeText | fmt_date}}</span>
      </div>
      <div>
        <chart-download 
        :chart-type="chartType"/>
      </div>
    </div>

    <div class="stock-turnover-data">

      <div class="stock-turnover-data-child">
        <div class="data-icon color1890FF">
          <i class="iconfont icon-zaikupinlei"></i>
        </div>
        <div>
          <div class="data-text">在库品类</div>
          <div class="data-amount">{{inCategoryText}} <span v-if="!inCategoryText">_</span></div>
        </div>
      </div>

      <div class="stock-turnover-data-child">
        <div class="data-icon color5BD171">
          <i class="iconfont icon-pinleizongshu"></i>
        </div>
        <div>
          <div class="data-text">品类总数</div>
          <div class="data-amount">{{allCategoryText}} <span v-if="!allCategoryText">_</span></div>
        </div>
      </div>

      <div class="stock-turnover-data-child">
        <div class="data-icon colorFA8C16">
          <i class="iconfont icon-beijianzongshu"></i>
        </div>
        <div>
          <div class="data-text">备件总数</div>
          <div class="data-amount">{{sparepartCountText}} <span v-if="!sparepartCountText">_</span></div>
        </div>
      </div>

      <div class="stock-turnover-data-child">
        <div class="data-icon color5BD171">
          <i class="iconfont icon-beijianzongjine"></i>
        </div>
        <div>
          <div class="data-text">备件总金额</div>
          <div class="data-amount">{{sparepartCostText}} <span v-if="!sparepartCostText">_</span></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { computed, onMounted, ref, watch } from 'vue';
import http from 'src/util/HttpUtil';
import Platform from '@src/util/platform.ts';
import ChartDownload from './ChartDownload';

export default {
  name: 'chart-stock-turnover-option-setting',
  props: {
    chartOption: {
      type: Object,
      default: () => ({})
    },
    pageInfo: {
      type: Object,
      default: () => ({}),
    },
    chartType: {
      type: String,
      default: ''
    },
    isExample: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    
  },
  setup(props, { emit }) {
    
    const allCategoryText = ref('')
    const inCategoryText  = ref('')
    const sparepartCostText  = ref('')
    const sparepartCountText  = ref('')
    const updateTimeText  = ref('')

    const getSparepartCount = async (isExample) => {
      try {
        const params = {
          isExample: isExample || false
        }
        const { code, msg, data } = await http.get('/api/dataware/outside/spTurnoverRate/getSparepartCount', params)
        if (code !== 200) {
          return Platform.alert(msg)
        }

        const { allCategory, inCategory, sparepartCost, sparepartCount, updateTime } = data || {}
        allCategoryText.value = allCategory
        inCategoryText.value = inCategory
        sparepartCostText.value = sparepartCost
        sparepartCountText.value = sparepartCount
        updateTimeText.value = updateTime

      } catch (error) {
        console.log(error)
      }
    }

    const openExample = computed(() => {
      return props.isExample
    })
    watch(openExample, (n) => {
      getSparepartCount(n)
    })

    onMounted(() => {
      getSparepartCount()
    })
    return {
      allCategoryText,
      inCategoryText,
      sparepartCostText,
      sparepartCountText,
      updateTimeText
    }
  },
  components: {
    [ChartDownload.name]: ChartDownload,
  }
};
</script>

<style lang="scss" scoped>
.chart-stock-turnover-option-container {
  padding-left: 16px;
  margin-bottom: 20px;
  .stock-turnover-title {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    .title {
      font-weight: 700;
      color: #262626;
    }
    .tips {
      font-size: 12px;
      color: #8C8C8C;
    }
  }

  .stock-turnover-data {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .stock-turnover-data-child {
      display: flex;
      justify-content: space-between;
      .data-icon {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        border-radius: 50%;
        margin-right: 18px;
        i {
          color: #FFFFFF;
          font-size: 24px;
        }
      }
      .color1890FF {
        background-color: #1890FF;
      }
      .color5BD171 {
        background-color: #5BD171;
      }
      .colorFA8C16 {
        background-color: #FA8C16;
      }
      .data-text {
        color: #8C8C8C;
      }
      .data-amount {
        font-size: 30px;
        color: #000000;
        span {
          color: #8C8C8C;
        }
      }
    }
  }
}
</style>
